/*@page {
  size: A5 landscape;
  margin: 0;
}*/

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 24px;
  background: #e9edf3;
  color: #092c59;
  font-family: "Prompt", "Tahoma", sans-serif;
}

.card1 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 297mm;
  height: 210mm;
  max-width: 100%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.98), rgba(255,255,255,.92) 60%, rgba(255,248,225,.95)),
    #fff;
  border: 3px solid #d99a19;
  outline: 1px solid #fff1bd;
  outline-offset: -9px;
  box-shadow: 0 12px 35px rgba(7, 35, 75, .18);
  padding: 13mm 15mm 9mm;
}

.card::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #e7bd59;
  pointer-events: none;
  z-index: -1;
}

.corner {
  position: absolute;
  z-index: -1;
  width: 42%;
  height: 30%;
  background: linear-gradient(135deg, #06295b 0 35%, #0c4b83 36% 48%, #e7aa27 49% 57%, #fff0b7 58% 65%, transparent 66%);
  opacity: .98;
}
.corner-top { top: -10mm; left: 0; clip-path: polygon(0 0,100% 0,0 100%); }
.corner-bottom {
  right: 0; 
  bottom: -25mm; 
  transform: rotate(180deg);
  clip-path: polygon(0 0,100% 0,0 100%);
}

.hex-pattern {
  position: absolute;
  z-index: -1;
  width: 24%;
  height: 60%;
  opacity: .23;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='86' viewBox='0 0 100 86'%3E%3Cpath d='M25 2 L49 15 L49 42 L25 56 L2 42 L2 15 Z M75 30 L98 43 L98 70 L75 84 L52 70 L52 43 Z' fill='none' stroke='%23e6ae37' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 100px 86px;
}
.hex-left { left: 0; top: 22%; }
.hex-right { right: 0; top: 30%; transform: rotate(180deg); }

.brand {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 31mm;
  text-align: left;
}
.institute-seal {
  width: 29mm;
  height: 29mm;
  flex: 0 0 29mm;
  border: 3px double #e3a321;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9a1 0 52%, #f8c84e 53% 58%, #fff8df 59%);
  color: #a51d16;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: inset 0 0 0 2px #b9271d;
  text-align: center;
  transform: rotate(-8deg);
}
.institute-seal strong { font: 700 25px Georgia, serif; line-height: 1; }
.seal-small { font: 700 7px Arial, sans-serif; letter-spacing: 1px; }
.brand-title { line-height: .98; }
.brand-main {
  color: #ffbd16;
  font: 800 clamp(28px, 4vw, 48px) Arial, sans-serif;
  letter-spacing: 1px;
  -webkit-text-stroke: 1px #9b4b00;
  text-shadow: 2px 3px 0 #743b05, 0 0 2px #fff;
}
.brand-sub {
  color: #0b315e;
  font: 800 clamp(22px, 3vw, 36px) Arial, sans-serif;
  letter-spacing: .5px;
}
.brand-sub span { color: #ed6b18; }
.brand-tagline {
  margin-top: 3px;
  color: #555;
  font: 13px Arial, sans-serif;
  letter-spacing: 1.5px;
}
.bee-mascot {
  position: absolute;
  right: 2%;
  top: -3%;
  font-size: 29px;
  display: flex;
  align-items: center;
  gap: 2px;
}
.bee-cap { font-size: 16px; color: #e6a500; }
.bee-face { filter: drop-shadow(1px 2px 1px #999); }
.bee-cup { font-size: 26px; }

.competition-title {
  width: 72%;
  margin: 4mm auto 2mm;
  padding: 3mm 8mm;
  border: 2px solid #e2a323;
  border-radius: 14px;
  background: linear-gradient(110deg, #082852, #0c477c, #082852);
  color: #fff;
  text-align: center;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.25;
  box-shadow: 0 3px 0 #c78c1b;
}
.competition-title strong {
  display: block;
  color: #ffd34e;
  font-size: 20px;
}
.card-ribbon {
  width: 53%;
  margin: 3mm auto 5mm;
  padding: 2mm 4mm;
  background: linear-gradient(180deg, #fff0a7, #e9b638 50%, #fff0a7);
  border: 1px solid #d39a1d;
  box-shadow: 0 3px 7px rgba(111, 73, 0, .18);
  text-align: center;
  color: #082d5d;
  font-size: 21px;
  font-weight: 700;
  position: relative;
}
.card-ribbon::before, .card-ribbon::after {
  content: "";
  position: absolute;
  top: 5px;
  width: 12mm;
  height: 100%;
  background: #c68b19;
  z-index: -1;
}
.card-ribbon::before { left: -9mm; transform: skewY(18deg); }
.card-ribbon::after { right: -9mm; transform: skewY(-18deg); }

.candidate {
  display: grid;
  grid-template-columns: 42% 58%;
  gap: 5mm;
  min-height: 65mm;
  padding: 1mm 6mm 4mm;
}
.field-labels {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  gap: 3mm;
  align-content: center;
}
.field-labels > div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 12mm;
  padding: 1.5mm 4mm;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(100deg, #082b57, #125184);
  font-size: 17px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0,0,0,.12);
}
.field-icon {
  width: 9mm;
  color: #fff;
  font-size: 22px;
  text-align: center;
}
.candidate-info {
  border-left: 2px solid #d9a12b;
  padding-left: 15mm;
  align-self: stretch;
  font-size: 16px;
  line-height: 1.35;
}
.candidate-code {
  display: inline-block;
  min-width: 62mm;
  margin: -1mm 0 3mm;
  padding: 1mm 5mm;
  border: 2px solid #e1a421;
  border-radius: 12px;
  background: linear-gradient(#fff9df, #fff);
  color: #e21d18;
  text-align: center;
  font: 800 29px Arial, sans-serif;
  letter-spacing: 1px;
}
.candidate-name strong, .candidate-name span { display: block; }
.candidate-name strong { font-size: 17px; }
.candidate-info p { margin: 1mm 0; }
.candidate-info .level { font-weight: 600; }
.school-en { font-family: Arial, sans-serif; }

.event-details {
  margin-top: -2mm;
  padding: 3mm 5mm;
  border: 2px solid #d8a02b;
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 2px 7px rgba(111,73,0,.1);
}
.detail-row {
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
  color: #092d5d;
  font-size: 15px;
  line-height: 1.6;
}
.detail-row + .detail-row { margin-top: 1mm; }
.detail-row strong { white-space: nowrap; }
.detail-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex: 0 0 8mm;
  color: #fff;
  background: #0b3a70;
  border-radius: 50%;
  width: 7mm;
  height: 7mm;
  font-size: 12px;
}
.notice {
  margin: 4mm auto 0;
  width: 94%;
  padding: 2mm 4mm;
  border-radius: 20px;
  background: linear-gradient(90deg, #082a55, #104b7b, #082a55);
  color: #fff;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
}
.bottom-ornament {
  position: absolute;
  bottom: 3mm;
  left: 35%;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c18a18, transparent);
}
.bottom-ornament span {
  position: absolute;
  left: 50%;
  top: -4px;
  width: 9px;
  height: 9px;
  background: #dca51e;
  transform: translateX(-50%) rotate(45deg);
  border: 1px solid #9b6b0e;
}

@media screen and (max-width: 900px) {
  body { padding: 8px; }
  .card {
    width: 100%;
    height: auto;
    min-height: 700px;
    padding: 24px 18px;
  }
  .brand { min-height: 110px; justify-content: flex-start; }
  .institute-seal { width: 72px; height: 72px; flex-basis: 72px; }
  .brand-main { font-size: clamp(23px, 6vw, 38px); }
  .brand-sub { font-size: clamp(18px, 5vw, 29px); }
  .brand-tagline { font-size: 10px; }
  .bee-mascot { right: 0; top: -5px; font-size: 20px; }
  .bee-cup { font-size: 18px; }
  .competition-title { width: 95%; font-size: 15px; }
  .competition-title strong { font-size: 16px; }
  .card-ribbon { width: 80%; font-size: 17px; }
  .candidate { grid-template-columns: 1fr; gap: 14px; padding: 0; }
  .field-labels { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; }
  .field-labels > div { min-height: 42px; font-size: 14px; }
  .field-icon { font-size: 18px; }
  .candidate-info { border-left: 0; border-top: 2px solid #d9a12b; padding: 12px 4px 0; font-size: 14px; }
  .candidate-code { font-size: 24px; min-width: 150px; }
  .candidate-name strong { font-size: 15px; }
  .event-details { margin-top: 16px; padding: 10px; }
  .detail-row { font-size: 12px; flex-wrap: wrap; }
  .detail-row strong { white-space: normal; }
  .notice { font-size: 10px; margin-top: 14px; }
}

/*@media print {
  html, body {
    width: 297mm;
    height: 210mm;
    padding: 0;
    margin: 0;
    background: #fff;
  }
  body { display: block; }
  .card {
    width: 297mm;
    height: 210mm;
    max-width: none;
    margin: 0;
    box-shadow: none;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}*/
/* ปุ่มคำสั่ง */
.card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px auto;
}

.card-actions button {
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-family: "Prompt", sans-serif;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all .2s ease;
    color: #fff;
}

.btn-print {
    background: #0b376b;
}

.btn-pdf {
    background: #d99a19;
}

.card-actions button:hover {
    transform: translateY(-2px);
    opacity: .9;
    box-shadow: 0 4px 10px rgba(0,0,0,.2);
}

.card-actions button:disabled {
    opacity: .6;
    cursor: wait;
}

/* ซ่อนปุ่มขณะพิมพ์ */
/*@media print {
    .card-actions {
        display: none !important;
    }

    @page {
        size: A5 landscape;
        margin: 0;
    }

    html, body {
        width: 297mm;
        height: 210mm;
        margin: 0;
        padding: 0;
    }

    .card {
        width: 297mm;
        height: 210mm;
        margin: 0;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}*/

/*LOGO*/
.brand {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 31mm;
    margin-bottom: 2mm;
}

.brand-logo {
    display: block;
    width: 115mm;
    max-width: 75%;
    height: 30mm;
    object-fit: contain;
}

.bee-mascot {
    position: absolute;
    right: 2%;
    top: 0;
    font-size: 29px;
    display: flex;
    align-items: center;
    gap: 2px;
}



/* จัดหน้าเว็บให้ปุ่มอยู่ใต้บัตร */
body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 24px;
}

/* โลโก้ */
.brand {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 31mm;
}

.brand-logo {
    display: block;
    width: 35%;
    max-width: 100%;
    height: 30mm;
    object-fit: contain;
}

/* ปุ่มด้านล่างบัตร */
.card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 20px auto 30px;
    width: 100%;
}

.card-actions button {
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-family: "Prompt", sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: white;
    cursor: pointer;
    transition: .2s;
}

.btn-print {
    background: #0b376b;
}

.btn-pdf {
    background: #d99a19;
}

.card-actions button:hover {
    opacity: .85;
    transform: translateY(-2px);
}

.card-actions button:disabled {
    opacity: .6;
    cursor: wait;
}

/* ตั้งค่าหน้าพิมพ์ */
/*@page {
	size: A4 ;
    margin: 0;
}

@media print {

    html, body {
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        display: block !important;
    }

    .card-actions {
        display: none !important;
    }

    .card1 {
        width: 297mm !important;
        height: 210mm !important;
        max-width: none !important;
        margin: 0 !important;
        box-shadow: none !important;

        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

}*/

/* มือถือ */
@media screen and (max-width: 900px) {

    .card-actions {
        flex-wrap: wrap;
    }

    .card-actions button {
        padding: 10px 16px;
        font-size: 13px;
    }

}





/* =====================================
   PRINT : แสดงเฉพาะบัตรสอบ 1 หน้า
   ===================================== */
@media print {

    @page {
		size: A4;
        margin: 0;
    }

   html, body {
        width: 297mm !important;
        height: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: white !important;
        display: block !important;
    }
	/*html, body {
        width: 297mm;
        height: 210mm;
        margin: 0;
        padding: 0;
    }*/

    /*.card {
        width: 297mm;
        height: 210mm;
        margin: 0;
        box-shadow: none;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }*/

    /* ซ่อนเนื้อหาทั้งหมด */
    body * {
        visibility: hidden !important;
    }

    /* แสดงเฉพาะบัตรสอบ */
    .card1,
    .card1 * {
        visibility: visible !important;
    }

  
/* จัดบัตรสอบให้อยู่ด้านบนสุดของกระดาษ */
.card1 {
    position: fixed !important;

    left: 50% !important;
    top: 0 !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    break-before: avoid !important;
    break-after: avoid !important;
    break-inside: avoid !important;

    page-break-before: avoid !important;
    page-break-after: avoid !important;
    page-break-inside: avoid !important;

    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
}


    /* ซ่อนปุ่มและพื้นที่ส่วนอื่น */
    .card-actions,
    .btn-print,
    .btn-pdf {
        display: none !important;
    }

}


/* ==============================
   ข้อมูลผู้เข้าแข่งขัน 2 คอลัมน์
   ============================== */

.candidate-grid {
    display: grid;
    grid-template-columns: 35% 65%;
    column-gap: 5mm;
    padding: 1mm 6mm 4mm;
}

/* แต่ละแถว */
.candidate-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 35% 65%;
    column-gap: 5mm;
    align-items: center;
    margin-bottom: 3mm;
}

/* ฝั่งซ้าย */
.field-label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 12mm;
    padding: 1.5mm 4mm;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(100deg, #082b57, #125184);
    font-size: 17px;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,.12);
}

/* ไอคอน */
.field-icon {
    width: 9mm;
    flex-shrink: 0;
    color: #fff;
    font-size: 22px;
    text-align: center;
}

/* ฝั่งขวา */
.field-value {
    min-height: 12mm;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 2px solid #d9a12b;
    padding: 1mm 0 1mm 15mm;
    font-size: 16px;
    line-height: 1.35;

     /* ตัวหนา + ขอบตัวอักษรสีขาว */
	/*font-weight: 700;
    -webkit-text-stroke: 0.2px #fff;*/

    /* เงาช่วยให้ตัวหนังสือเด่น */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

/* ชื่อผู้เข้าแข่งขัน */
.candidate-name strong,
.candidate-name span {
    display: block;
	
}

.candidate-name strong {
    font-size: 17px;
}

/* รหัสผู้เข้าแข่งขัน */
.candidate-code {
    display: inline-block;
    width: 62mm;
    margin: 0;
    padding: 1mm 5mm;
    border: 2px solid #e1a421;
    border-radius: 12px;
    background: linear-gradient(#fff9df, #fff);
    color: #e21d18;
    text-align: center;
    font: 800 29px Arial, sans-serif;
    letter-spacing: 1px;
}

.school-en {
    font-family: Arial, sans-serif;
}

/* ปรับ Header ให้ขึ้นใกล้ขอบบน */
.brand {
    margin-top: -13mm;
}